<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三角形</title>
</head>
<body>
    <figure>
        <figcaption>直角三角形</figcaption>
        <div
            style="
            width: 0em;
            height: 0em;
            border-style: solid;
            border-color: transparent transparent #28c6f6 transparent;
            border-width: 0px 20em 10em 0px;
/*            底部border 控制 三角形的高，右边border 控制三角形的宽*/
"
        ></div>
    </figure>

<figure>
    <figcaption>等腰三角形</figcaption>
    <div style="
    width: 0em;
    border: solid;
    border-width: 0 5em 12em 5em;
    /*
        左右 border 控制左右的边
        bottom-border 控制高
    */
    border-color: transparent transparent #28c6f6 transparent;

">

    </div>
</figure>
</body>
</html>